<template>
  <div>

    <el-menu class="el-menu-demo"
             mode="horizontal">
      <el-menu-item index="1"
                    @click="personCenter">个人中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的活动</template>
        <el-menu-item index="2-1"
                      @click="publishActivity">我发表的活动</el-menu-item>
        <el-menu-item index="2-2"
                      @click="joinActivity">我参与的活动</el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">我的动态</template>

        <el-menu-item index="3-1"
                      @click="publishDynamic">我发表的动态</el-menu-item>

        <el-menu-item index="2-2"
                      @click="joinDynamic">我参与的动态</el-menu-item>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">我的订单</template>

        <el-menu-item index="4-1"
                      @click="serviceOrder">服务订单</el-menu-item>

        <el-menu-item index="4-2"
                      @click="goodsOrder">商品订单</el-menu-item>
      </el-submenu>

      <el-menu-item index="5"
                    @click="propertyComplaints">物业投诉</el-menu-item>

    </el-menu>
    <div>
      <el-container>
        <el-main>
          <!-- :visible.sync="personCenterVisible -->
          <userdetail v-if="this.isVisible===1"></userdetail>
          <publishActicity v-if="this.isVisible===2"></publishActicity>
          <joinActivity v-if="this.isVisible===3"></joinActivity>
          <publishDynamic v-if="this.isVisible===4"></publishDynamic>
          <joinDynamic v-if="this.isVisible===5"></joinDynamic>
          <serviceOrder v-if="this.isVisible===6"></serviceOrder>
          <goodsOrder v-if="this.isVisible===8"></goodsOrder>
          <propertyComplaints v-if="this.isVisible===7"></propertyComplaints>

        </el-main>
      </el-container>
    </div>

  </div>
</template>

<script>

import Userdetail from './detail/userdetail'
import joinActivity from './detail/joinactivity'
import publishActicity from './detail/publishactivity'
import joinDynamic from './detail/joindynamic'
import publishDynamic from './detail/publishdynamic'
import serviceOrder from './detail/serviceOrder'
import propertyComplaints from './detail/propertycomplaints'
import goodsOrder from './detail/goodsOrder'


export default {


  data () {
    return {
      isVisible: 1
    }
  },
  components: {
    Userdetail,
    joinActivity,
    publishActicity,
    joinDynamic,
    publishDynamic,
    serviceOrder,
    propertyComplaints,
    goodsOrder
  },
  methods: {
    publishActivity () {
      this.isVisible = 2;
    },
    joinActivity () {
      this.isVisible = 3;
    },
    publishDynamic () {
      this.isVisible = 4;
    },
    joinDynamic () {
      this.isVisible = 5;
    },
    personCenter () {
      this.isVisible = 1;
    },
    serviceOrder () {
      this.isVisible = 6;
    },
    propertyComplaints () {
      this.isVisible = 7;
    },
    goodsOrder () {
      this.isVisible = 8;
    }
  }
}
</script>

<style scoped>
</style>